<template>
  <div class="security">
    <a-form-model
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      style="width: 620px;"
      :rules="rules"
      ref="form"
    >
      <a-form-model-item label="用户名">
        <a-input v-model="account.phone" disabled />
      </a-form-model-item>
      <a-form-model-item label="验证码" prop="code">
        <a-row :gutter="8" style="margin: 0 -4px">
          <a-col :span="16">
            <a-input placeholder="验证码" v-model="form.code">
              <a-icon slot="prefix" type="mail" />
            </a-input>
          </a-col>
          <a-col :span="8" style="padding-left: 4px">
            <a-button class="captcha-button" @click="getCode">
              {{ timeCount > 0 ? `剩余${timeCount}s` : "获取验证码" }}
            </a-button>
          </a-col>
        </a-row>
      </a-form-model-item>

      <a-form-model-item label="新密码" prop="password">
        <a-input v-model="form.password" />
      </a-form-model-item>

      <a-form-model-item label="确认新密码" prop="confirmPassword">
        <a-input v-model="form.confirmPassword" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">
          确认
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
import { getCode, updateAccount } from "@/api/account";
import storage from "@/utils/storage";

export default {
  data() {
    return {
      timeCount: 0,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        code: undefined,
        password: undefined,
        confirmPassword: undefined
      }
    };
  },
  computed: {
    rules() {
      return {
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ],
        confirmPassword: [
          {
            title: "确认密码",
            required: true,
            message: "请确认密码",
            trigger: "blur"
          }
        ]
      };
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    async getCode() {
      if (this.timeCount) {
        return;
      }

      this.timeCount = 60;
      const res = await getCode({ phone: this.account.phone, type: 3 });

      storage.setItem("CODE", res.data);

      this.timer = setInterval(() => {
        this.timeCount--;

        if (this.timeCount <= 0) {
          this.timeCount = 0;
          clearInterval(this.timer);
        }
      }, 1000);
    },
    onSubmit(e) {
      e.preventDefault();

      this.$refs.form.validate(async valid => {
        if (valid) {
          if (storage.getItem("CODE") != this.form.code) {
            this.$message.info("请输入正确的验证码");
            return;
          }

          if (this.form.password != this.form.confirmPassword) {
            this.$message.info("两次输入的密码不一致");
            return;
          }

          await updateAccount({
            ...this.account,
            password: this.form.password
          });

          this.$message.success("修改密码成功");

          this.$router.push("/user-center");
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.security {
  background: @white;
  padding: 40px 100px;
}
</style>
